<!-- works -->
<template>
  <div>
    <div class="flex justify-center bg-main">
      <div class="width-main padding-tb margin-tb">
        <h3 class="margin-top title-lab">实验室</h3>
        <!-- card -->
        <div class="flex flex-wrap margin-top">
          <div class="card-out" v-for="(item, index) in labs" :key="index">
            <div class="card">
              <div class="img-box">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="content-box">
                <div class="title text-bold text-xl text-line">
                  {{ item.name }}
                </div>
                <div class="depict">
                  <div class="text-line2 text-height">
                    {{ item.describe }}
                  </div>
                </div>
                <a :href="item.link">查看</a>
              </div>
            </div>
          </div>
        </div>
        <!-- pagination -->
        <Pagination
          :total="count"
          :limit="form.limit"
          @currentChange="handlePageChange"
        ></Pagination>
      </div>
    </div>
    <Comment></Comment>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import { demoLinkList } from "@/api/link";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      form: {
        page: 1,
        limit: 6,
        is_demo: 1,
      },
      labs: [],
      count: 0,
    };
  },
  mounted() {
    this.handleLoadData();
  },
  methods: {
    handleLoadData() {
      demoLinkList(this.form).then((res) => {
        this.labs = res.data.data;
        this.count = res.data.count;
      });
    },
    handlePageChange(page) {
      this.form.page = page;
      this.handleLoadData();
    },
  },
};
</script>
<style lang='scss' scoped>
.title-lab {
  font-size: 1rem;
  font-weight: 700;
  color: #3c3626;
  box-shadow: 2px 2px 2px #dcd5c3, -1px -1px 1px #ffffff;
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0.6rem 2rem;
  box-sizing: border-box;
  margin: 0 0 0.4rem;
  position: relative;
  line-height: 1.3;
  text-shadow: 2px 2px 1px #fff;
  background: #f3efe6;

  &::before {
    content: "🐣";
    font-size: 7px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.card-out {
  padding: 10px;
  width: 33.33%;
  position: relative;

  .card {
    position: relative;
    height: 360px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba($color: #f0efea, $alpha: 1);
    box-shadow: 5px 5px 10px #d9d2be, -5px 0 10px #ffffff;
    .img-box {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      height: 150px;
      width: 150px;
      border-radius: 30%;
      overflow: hidden;
      transition: 0.5s;

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        width: 270px;
      }
    }

    &:hover {
      background-color: rgba($color: #f0efea, $alpha: 0.5);
    }
    &:hover .img-box {
      top: 5%;
      transform: translate(-50%, 0);
    }

    .content-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 90px;
      text-align: center;
      transition: 1s;
      z-index: 0;

      .title {
        position: relative;
        // padding: 0 10px;
        margin: 0 50px;
        text-shadow: 2px 2px 1px #fff;
      }
      .depict {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px 20px;
        transition: 0.5s;
        opacity: 0;
        visibility: hidden;
      }
      a {
        position: relative;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        box-shadow: 2px 2px 3px #cac1a7, -2px -2px 3px #ffffff;
        color: #111;
        border-radius: 10px;
        text-align: center;
        padding: 0.6rem 1.1rem;
        box-sizing: border-box;
        line-height: 1.3;
        text-shadow: 2px 2px 1px #fff;
        background: #f3efe6;
        display: inline-block;
        margin-top: 10px;
        text-decoration: none;
        opacity: 0;
        transform: translateY(50px);
        transition: 0.5s;
      }
      a:hover {
        box-shadow: 1px 1px 1px #d9d2be, -1px -1px 1px #ffffff;
        opacity: 1;
      }
    }

    &:hover .content-box {
      height: 180px;
    }
    &:hover .content-box .depict {
      opacity: 1;
      visibility: visible;
      transition-delay: 0.5s;
    }
    &:hover .content-box .depict {
      margin: 15px;
      font-weight: 300;
      font-size: 14px;
    }
    &:hover .content-box a {
      opacity: 1;
      transform: translateY(0px);
      transition-delay: 0.75s;
    }
  }
}
</style>